<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script>
        /**
         * 原生JavaScript
         */ 
        // // Model 模型数据
        // var msg = 'hello'

        // window.onload =  function(){
        //     var h4Dom = document.getElementById('h4Dom')
        //     var inputDom = document.getElementById('inputDom')
        //     // Model ---> View
        //     h4Dom.innerText = msg
        //     inputDom.value = msg

        //     // View ---> Model
        //     inputDom.oninput = function(){
        //         msg = this.value
        //         h4Dom.innerText = msg
        //         console.log(msg)
        //     }
        // }

        /**
         * 使用Vue
         */ 
        window.onload = function(){
            var vm = new Vue({
                el: '#app', // 指定关联的元素（容器）
                data: { // 数据仓库
                    msg: 'hello'
                }
            })
        }

        

    </script>
</head>
<body>
    <div id="app">
        <!-- <h4 id="h4Dom"></h4>
        <input type="text" id="inputDom"> -->

        <!-- 两对大括号称为插值表达式，用来进行数据的展示 -->
        <h4>{{msg}}</h4>
        <!-- v-model是指令，用来进行双向数据绑定 -->
        <input type="text" v-model="msg">
    </div>
</body>
</html>